<!--
 * @Author: liqi
 * @Date: 2022-09-07 09:08:22
 * @LastEditors: liqi
 * @LastEditTime: 2022-09-07 18:58:33
 * @Description: 
-->
<template>
  <div>
    <!-- 头部 -->
    <header class="header">北海政务一体化平台</header>
    <!-- 头部/ -->
    <!-- 体部 -->
    <div class="content">
      <div class="top">
        <div class="left">
          <div class="charts"><Left1/></div>
          <div class="charts"><Left2/></div>
        </div>
        <div class="center"><Map/></div>
        <div class="right">
          <div class="charts"><Right1/></div>
          <div class="charts"><Right2/></div>
        </div>
      </div>
      <div class="bottom">
        <div class="charts"><Bottom1/></div>
        <div class="charts"><Bottom2/></div>
        <div class="charts"><Bottom3/></div>
        <div class="charts"><Bottom4/></div>
      </div>
    </div>
    <!-- 体部/ -->
  </div>
</template>

<script>
import Left1 from '../../pages/government/components/Left1.vue';
import Left2 from '../../pages/government/components/Left2.vue';
import Right2 from '../../pages/government/components/Right2';
import Map from '../../pages/government/components/Map';
import Right1 from '../../pages/government/components/Right1';
import Bottom1 from '../../pages/government/components/Bottom1';
import Bottom2 from '../../pages/government/components/Bottom2';
import Bottom3 from '../../pages/government/components/Bottom3';
import Bottom4 from '../../pages/government/components/Bottom4';
export default {
  components:{
    Left1,
    Left2,
    Right2,
    Right1,
    Bottom1,
    Bottom2,
    Bottom3,
    Bottom4,
    Map
  },
  data() {
    return {
      
    }
  },
}
</script>

<style lang="scss">
// 头部样式
.header{
  height: 60px;
  background-image: url("../../assets/layout/header.png");
  background-size: 100% 200px;
  color: white;
  font-size: 28px;
  text-align: center;
}

// 体部样式
.content{
  height: calc(100vh - 60px);
  display: flex;
  flex-direction: column;
  .charts{
    background-image: url('../../assets/layout/chart_box_bg.png');
    background-size: 100% 100%;
    margin: 0 .5em .5em .5em;
  }
  .top{
    flex: 2;
    display: flex;
    .left,.right{
      flex: 1;
      display: flex;
      flex-direction: column;
      div{
        flex: 1;
      }
    }
    .center{
      flex: 2;
      background-image: url('../../assets/layout/chart_center_box_bg.png');
      background-size: 100% 100%;
      margin-bottom: .5em;
    }
  }
  .bottom{
    flex: 1;
    display: flex;
    div{
      flex: 1;
    }
  }
}
</style>